<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <link href="framework/reset.css" rel="stylesheet">
    <link href="css/businessList.css" rel="stylesheet">
    <script src="js/pageJump.js"></script>
    <script src="https://fastly.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>饿了么 商家列表</title>
</head>

<body>
    <div class="wrapper" id="app">

        <!-- header部分 -->
        <header>
            <p>商家列表</p>
        </header>

        <!-- 商家列表部分 -->
        <ul class="business" >
            <li v-for="business in businessList" @click="jumpTo('/businessInfo.html?id='+business.businessId)">
                <div class="business-img">
                    <img :src="business.businessImg">
                    <div class="business-img-quantity" v-show="false"></div>
                </div>
                <div class="business-info">
                    <h3>{{business.businessName}}</h3>
                    <p>&#165;{{business.starPrice}}起送 | &#165;{{business.deliveryPrice}}配送</p>
                    <p>{{business.businessExplain}}</p>
                </div>
            </li>
            
        </ul>

        <!-- 底部菜单部分 -->
        <ul class="footer">
            <li onclick="location.href='index.html'">
                <i class="fa fa-home"></i>
                <p>首页</p>
            </li>
            <li>
                <i class="fa fa-compass"></i>
                <p>发现</p>
            </li>
            <li onclick="location.href='orderList.html'">
                <i class="fa fa-file-text-o"></i>
                <p>订单</p>
            </li>
            <li>
                <i class="fa fa-user-o"></i>
                <p>我的</p>
            </li>
        </ul>

    </div>
    <script>
        var param=getRequest()
        var path=getRequestPath()
        var app=new Vue({
            el:"#app",
            data:{
                businessList:[]
            },
            methods:{
                getBusinesses:async function(){
                    axios.post(path+"/BusinessController/listBusinessByOrderTypeId",null,{
                        params:{
                            orderTypeId:param.type
                        }
                    }).then((respon)=>{
                        if(respon.data.code==200){           
                            this.businessList=respon.data.detail
                        }
                    }).catch((error)=>{
                        console.log(error)
                    })
                },
                jumpTo:function(u){
                    window.location.href=u
                }
            },
            created() {
                this.getBusinesses()
            }
        })
    </script>
</body>

</html>